<!-- table 列表头部 -->
<template>
    <div class="tabHeader" :style="{ 'margin-bottom': props.elTable_Options.elMenuArr ? '' : '15px' }">
        <!-- 页面名称 -->
        <div class="page-title" v-show="props.elTable_Options.pagename">{{ props.elTable_Options.pagename }}</div>
        <!-- 操作按钮 -->
        <div class="btn" v-show="props.elTable_Options.opbutton">
            <el-button 
                v-for="btn in props.elTable_Options.opbutton" :key="btn.dealway"
                :icon="btn.icon"
                :type="btn.type"
                @click="opbuttonclick(btn.dealway)"
                :disabled="!(UserMsg.is_superuser || (btn.keyV && state.permission.includes(btn.keyV) || !btn.disabled))"
            >{{ btn.label }}</el-button>
        </div>
        <!-- tab切换栏 -->
        <el-menu :default-active="props.elTable_Options.menuname" mode="horizontal" @select="handleSelect"
            v-show="props.elTable_Options.elMenuArr">
            <el-menu-item v-for="menu in props.elTable_Options.elMenuArr" :key="menu.key" :index="menu.key">{{
                menu.value }}</el-menu-item>
        </el-menu>
    </div>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import commonV from '@/common/index'

const route = useRoute()

//参数
let props = defineProps({
    elTable_Options: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

//事件
let emits = defineEmits(['bottonHandle', 'handleSelect'])

onMounted(() => {
    getUserLimits()
})

//数据
let state = reactive({
    UserMsg: JSON.parse(localStorage.getItem('UserMsg')),
    permission: []
})
let { UserMsg, permission } = toRefs(state)

//点击按钮
let opbuttonclick = (dealway) => {
    emits('bottonHandle', dealway)
}

//切换tab
let handleSelect = (v) => {
    emits('handleSelect', v)
}

//获取用户权限
let getUserLimits = async () => {
    state.permission = await commonV.getcurrenUserPermissionasync(route.path, 1)
}
</script>

<style lang="scss" scoped>
.tabHeader {
    width: 100%;

    // margin-bottom: 15px;
    .page-title {
        margin-bottom: 15px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1F2D3D;
    }

    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
        background-color: transparent;
    }

    &:deep(.el-menu) {
        background-color: #fff;

        .el-menu-hover-bg-color,
        .el-menu-item:hover,
        .el-menu-item.is-active,
        .el-sub-menu.is-active .el-sub-menu__title,
        .el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
            background-color: #fff !important;
        }
    }
}
</style>